<template>
  <div class="app-container">
    <div class="video">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="all">
        <!-- <el-tab-pane name="zhangjie">
          <span slot="label"><i class="el-icon-notebook-2" /> 课程章节</span>
          <zhangjie></zhangjie>
        </el-tab-pane> -->
        <!-- <el-tab-pane name="miaoshu">
          <span slot="label"><i class="el-icon-tickets"></i> 课程描述</span>
        </el-tab-pane> -->
        <el-tab-pane name="fenlei">
          <span slot="label"><i class="el-icon-tickets"></i> 课程分类</span>
          <fenlei :isFenlei='isfenlei'></fenlei>
        </el-tab-pane>
        <el-tab-pane name="jiangshi">
          <span slot="label"><i class="el-icon-s-custom" /> 讲师管理</span>
          <jiangshi :isload="isload"></jiangshi>
        </el-tab-pane>
        <!-- <el-tab-pane name="xiaojie">
          <span slot="label"><i class="el-icon-tickets"></i> 课程小节</span>
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import zhangjie from './vcompontens/zhangjie'
import jiangshi from './vcompontens/jiangshi'
import fenlei from './vcompontens/fenlei'
export default {
  data(){
    return{
      activeName: 'fenlei',
      isload: false,  //是否点击了讲师
      isfenlei: false,   //是否点击了课程分类
    }
  },
  components: {
    zhangjie,
    jiangshi,
    fenlei
  },
  methods:{
    handleClick(param){
      // console.log(param.name)
      console.log(this.activeName)
      // if(param.name === 'jiangshi'){
      //   self.isload = true
      //   self.isfenlei = false
      // }else if(param.name === 'fenlei'){
      //   self.isfenlei = true
      //   self.isload = false
      // }
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-tabs__item.is-active {
  color: #18a05e;
}
/deep/.el-tabs__active-bar {
  background-color: #18a05e;
}
/deep/.el-tabs__item:hover {
  color: #18a05e;
  cursor: pointer;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.video{
  background: #fff;
  padding: 20px;
}
</style>